<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>发布成功 - EasyBlog博客</title>
    <th:block th:replace="~{ fragment/common::common_head}" />
    <!--加载动画和确认框特效-->
    <link rel="stylesheet" href="../static/css/loading/zeroModal.css" th:href="@{/static/css/loading/zeroModal.css}">
</head>
<body>

<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>

<br>
<br>
<br>

<div class="m-content-container" style="max-width: 60em!important;">
    <div class="ui message m-padded-tb-huge" style="padding-top: 20px !important;background-color: #FFFFFF !important;">
        <div style="padding-bottom: 20px !important;"><a href="#" th:href="@{/manage/blog/}" style="color: #3399ea !important;font-size: 14px !important;"><i class="chevron blue left icon"></i> 管理博文</a></div>
        <div class="ui container" style="background-color: #f5f6f7 !important;">
            <div style="padding: 10px 10px !important;">
                <div style="margin: 16px auto 8px auto !important;font-size: 18px !important;color: #474747 !important;word-break: break-all;" th:text="${article.getArticleTopic()}">SpringMVC</div>
                <div th:text="${#strings.abbreviate(article.getArticleContent(),500)}" style="color: #999 !important;font-size: 14px !important;word-break: break-all;min-height: 10em;">
            </div>
        </div>
        </div>
        <span th:if="${article!=null}"><i class="green check icon"></i><a href="#" th:href="@{/article/details/{id}(id=${article.getArticleId()})}" style="color: #3399ea !important;font-size: 14px !important;">文章发布成功&nbsp;查看文章<i class="chevron blue right icon"></i></a></span>
        <span><a href="#" th:href="@{/manage/blog/post/}" style="color: #3399ea !important;font-size: 14px !important;margin-left: 30px !important;">再写一篇<i class="chevron blue right icon"></i></a></span>
        <span><a href="#" onclick="showUploadModal()" style="color: #3399ea !important;font-size: 14px !important;margin-left: 30px !important;" title="增加文章入口图片不仅仅会更美观些，还可以让访客能更快速的了解你的文章要义">为文章配首图<i class="chevron blue right icon"></i></a></span>
</div>
</div>

<!--图片上传工具-->
<div class="ui small second coupled modal transition hidden">
    <div class="header">
        上传文章首图
    </div>
    <div class="content">
        <div class="ui from">
            <input id="input_file" style="position:absolute;opacity:0;height: 35px !important;width: 117px !important;padding: 0 !important;cursor: pointer;" onchange="show(this)" accept="image/*" type="file"/>
            <button class="ui button" style="cursor: pointer;"><i class="upload icon"></i>上传图片</button>
            <div style="margin-top: 10px; ">
                <img id="pre-look"  th:src="@{/static/images/upload.jpg}" style="width: 500px;height: 300px;margin-left: 100px">
            </div>
        </div>
    </div>
    <div class="actions">
        <div class="ui  button article-upload-image-cancel">取消</div>
        <div class="ui green button article-upload-image-ok">
            <i class="checkmark  icon"></i>
            上传
        </div>
    </div>
</div>


<div style="height: 16rem"></div>

<!--footer-->
<div th:replace="~{ fragment/common :: footbar}"></div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<script src="../static/js/loading/mustache.js" th:src="@{/static/js/loading/mustache.js}"></script>
<script src="../static/js/loading/zeroModal.js" th:src="@{/static/js/loading/zeroModal.js}"></script>
<script type="text/javascript">

    let userId=$('#userId').val();

    $(document).ready(function () {
        showPageZoomWarning();
        toggleStatus();
        logOut();
    });
</script>
<script th:online="javascript" type="text/javascript">

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    function showUploadModal() {
        $('.second.modal').modal("show");
        $('.second.modal').modal({
            closable: false
        });
    }

    $('.article-upload-image-cancel').click(function () {
        $('.second.modal').modal("hide");
    });


    $('.article-upload-image-ok').click(function () {
        let userId=$('#userId').val();
        let articleId = "[[${article.getArticleId()}]]";
        if (articleId != "" && articleId > 0) {
            //获取图片的base64串
            let imgByte64Str = $('#pre-look')[0].src;
            if (imgByte64Str != null && imgByte64Str != "" ) {
                _loading(2);
                $.ajax({
                    url: "/manage/blog/upload_article_img",
                    method: "POST",
                    sync: false,
                    data: {imgByte64Str: imgByte64Str, articleId: articleId},
                    dataType: "json",
                    success: function (response) {
                        if (response.success) {
                            _loadingClose();
                            $('.second.modal').modal("hide");
                            showSuccessMessage("上传成功！")
                        } else {
                            showErrorMessage("服务异常，请稍后重试！")
                        }
                    },
                    error: function () {
                        _loadingClose();
                        showErrorMessage("服务异常，请稍后重试！")
                    }
                })
            } else {
                showWarningMessage("请选择图片");
            }
        } else {
            showErrorMessage("参数错误！");
            $('.second.modal').modal("hide");
        }
    });

    //从本地选择图片后，页面显示
    function show(obj) {
        let rd = new FileReader(); //创建文件读取对象
        let files = obj.files[0];  //获取file组件中的文件
        rd.readAsDataURL(files);   //文件读取装换为base64类型
        rd.onloadend = function (e) {
            //加载完毕之后获取结果赋值给img
            $('#pre-look').height(300);
            $('#pre-look').width(450);
            document.getElementById("pre-look").src = this.result;
        };

    }
</script>
</body>
</html>